﻿@page "/scheduler/time-scale"

@using Syncfusion.Blazor.Schedule
@using Syncfusion.Blazor.DropDowns
@inherits SampleBaseComponent;

<SampleDescription>
    <p> This demo depicts how to customize the grid lines of Scheduler with different duration, count and also, how to apply template customizations on it. </p>
</SampleDescription>
<ActionDescription>
   <p> In this demo, Scheduler has been allowed to display different number of grid lines per hour assigned with different duration
       to each cell, by using the <code>Interval</code> and <code>SlotCount</code> properties. The grid lines can also be disabled on schedule by setting <code>false</code> to the
       <code>Enable</code> property available within <code>TimeScale</code>. The time header text can be customized by using the <code>MajorSlotTemplate</code> and <code>MinorSlotTemplate</code> properties.  </p>
</ActionDescription>

<div class="col-lg-9 control-section">
    <div class="schedule-wrapper">
        <SfSchedule TValue="ScheduleData.AppointmentData" Width="100%" Height="650px" @bind-SelectedDate="@CurrentDate">
            <ScheduleViews>
                <ScheduleView Option="View.Day"></ScheduleView>
                <ScheduleView Option="View.Week"></ScheduleView>
                <ScheduleView MaxEventsPerRow="12" Option="View.TimelineDay"></ScheduleView>
                <ScheduleView MaxEventsPerRow="12" Option="View.TimelineWeek"></ScheduleView>
            </ScheduleViews>
            <ScheduleTimeScale Enable="@GridLine" Interval="@IntervalValue" SlotCount="@SlotValue"></ScheduleTimeScale>
            <ScheduleEventSettings DataSource="@DataSource"></ScheduleEventSettings>
        </SfSchedule>
    </div>
</div>
<div class="col-lg-3 property-section">
    &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<br>
    <div class="property-panel-section">
        <div class="property-panel-header">Properties</div>
        <div class="property-panel-content">
            <table id='property' title='Properties' class='property-panel-table' style="width: 100%;">
                <tbody>
                    <tr style="height: 50px">
                        <td style="width: 30%">
                            <div>
                                Interval (in Minutes)
                            </div>
                        </td>
                        <td style="width: 70%;">
                            <div>
                                    <SfDropDownList TValue="int" TItem="TimeScaleDropDownModel" @bind-Value="@IntervalValue" DataSource="@IntervalData">
                                        <DropDownListFieldSettings Text="Text" Value="Value"></DropDownListFieldSettings>
                                    </SfDropDownList>
                            </div>
                        </td>
                    </tr>
                    <tr style="height: 50px">
                        <td style="width: 30%">
                            <div>
                                Slot Count
                            </div>
                        </td>
                        <td style="width: 70%;">
                            <div>
                                    <SfDropDownList TValue="int" TItem="TimeScaleDropDownModel" @bind-Value="@SlotValue" DataSource="@SlotCountsData">
                                        <DropDownListFieldSettings Text="Text" Value="Value"></DropDownListFieldSettings>
                                    </SfDropDownList>
                            </div>
                        </td>
                    </tr>
                    <tr style="height: 50px">
                        <td style="width: 30%">
                            <div>
                                Grid lines
                            </div>
                        </td>
                        <td style="width: 70%;">
                            <div>
                                    <SfDropDownList TValue="bool" TItem="TimeScaleDropDownModelOption" @bind-Value="@GridLine" DataSource="@TimeScaleOption">
                                        <DropDownListFieldSettings Text="Text" Value="Value"></DropDownListFieldSettings>
                                    </SfDropDownList>
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>


@code{
    public List<ScheduleData.AppointmentData> DataSource = new ScheduleData().GetScheduleData();
    public DateTime CurrentDate = new DateTime(2020, 1, 9);
    public int IntervalValue { get; set; } =  60;
    public int SlotValue { get; set; } =  6 ;
    public bool GridLine { get; set; } =  true ;
    public string GridStatus { get; set; } = "enable" ;
    public void IntervalChanged (ChangeEventArgs<string, TimeScaleDropDownModel> args)
    {
        this.IntervalValue = Convert.ToInt32(args.Value);
    }
    public void SlotCountChange (ChangeEventArgs<string, TimeScaleDropDownModel> args)
    {
        this.SlotValue = Convert.ToInt32(args.Value);
    }
    public void TimeScaleOptionChange (ChangeEventArgs<string, TimeScaleDropDownModelOption> args)
    {
        this.GridLine = (args.Value == "enable") ? true : false;
    }
    public List<TimeScaleDropDownModel> IntervalData = new List<TimeScaleDropDownModel>()
    {
       new TimeScaleDropDownModel { Text = "30", Value = 30 },
       new TimeScaleDropDownModel { Text = "60", Value = 60 },
       new TimeScaleDropDownModel { Text = "90", Value = 90 },
       new TimeScaleDropDownModel { Text = "120", Value = 120 },
       new TimeScaleDropDownModel { Text = "150", Value = 150 },
       new TimeScaleDropDownModel { Text = "180", Value = 180 },
       new TimeScaleDropDownModel { Text = "240", Value = 240 },
       new TimeScaleDropDownModel { Text = "300", Value = 300 },
       new TimeScaleDropDownModel { Text = "720", Value = 720 }
    };
    public List<TimeScaleDropDownModel> SlotCountsData = new List<TimeScaleDropDownModel>()
    {
        new TimeScaleDropDownModel { Text = "1", Value = 1 },
        new TimeScaleDropDownModel { Text = "2", Value = 2 },
        new TimeScaleDropDownModel { Text = "3", Value = 3 },
        new TimeScaleDropDownModel { Text = "4", Value = 4 },
        new TimeScaleDropDownModel { Text = "5", Value = 5 },
        new TimeScaleDropDownModel { Text = "6", Value = 6 }
    };
    public List<TimeScaleDropDownModelOption> TimeScaleOption = new List<TimeScaleDropDownModelOption>()
    {
        new TimeScaleDropDownModelOption { Text = "Show", Value = true },
        new TimeScaleDropDownModelOption { Text = "Hide", Value = false }
    };
    public class TimeScaleDropDownModel
    {
        public string Text { get; set; }
        public int Value { get; set; }
    }
    public class TimeScaleDropDownModelOption
    {
        public string Text { get; set; }
        public bool Value { get; set; }
    }
}